<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		<script>
			//on
			$(function(){
				/*$("ul li").hover(function(){
					$(this).css({"font-size":"49px","color":"red"});
				},function(){
					$(this).css({"font-size":"16px","color":"black"});
				});*/
				$("ul").on("mouseover","li",function(){
					$(this).css({"font-size":"49px","color":"red"});
				}).on("mouseout","li",function(){
					$(this).css({"font-size":"16px","color":"black"});
				});
				$("ul li").dblclick(function(){
					$(this).remove();
				});
				$("#add").click(function(){
					let name=window.prompt("请输入一种新水果");
					var $l=$("<li>"+name+"</li>");
					$("ul").append("<li>"+name+"</li>");
				});
				
				$("#clone").click(function(){
					$("div").append($("ul").clone(false));
				});
			});
		</script>
	</head>
	<body>
		<div>
			<ul>
				<li>苹果</li>
				<li>梨子</li>
				<li>桃子</li>
				<li>柿子</li>
				<li>葡萄</li>
				<li>水蜜桃</li>
				<li>杏子</li>
				<li>芒果</li>
				<li>西瓜</li>
			</ul>
		</div>
		<input type="button" value="add" name="add" id="add"/>
		<input type="button" value="clone" name="克隆" id="clone"/>
	</body>
</html>
